<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>

<ol>
	<li>事件名 parentmsg 不能写大写，否则可能会报错</li>
</ol>





<div id="app">
	
	<com1 v-bind:parentmsg='msg' @func='getMsg'></com1>  
	<p style="color:red">{{msg}}  </p>
  
</div>

<template id="tmp1" >
<div>
	<h2>这是子组件++{{parentmsg}} </h2>
	<input type="button" value="向父组件传递消息" @click='sendMsg'>
</div>
</template>







<br>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var com1 = {
	template:'#tmp1',
	props:['parentmsg'],
	data(){
		return{
			msg:'子组件要传给父组件的内容'
		}
	},
	methods:{
		sendMsg(){
			this.$emit('func',this.msg)
			},
	},

}







var  vm= new Vue({
  el: '#app',

  data: {
  	 msg:'这是父组件的内容',
  	 msgform:''
  },

  methods:{
  		getMsg(data){
  			this.msgform = data
  			console.log(this.msgform)

  		}
  },

  components:{
  	com1//直接挂载，可以添加名称，然后再html上用这个名称
  }

})





</script>

	
</body>
</html>